<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多列布局</title>
    <style>
        div{
            height: 300px;
            background: yellow;

            /* 显示的列数 */
            column-count: 5;

            /* 调整列间距 */
            column-gap:30px;

            /* 列边框 */
            column-rule:2px solid red ;

            /* 列高度统一 */
            /* column-fill: auto; */
            /* auto把父盒子占满 */
             
            /* 调整列宽 */
            /* column-width:300px; */
        }
        div>h1{
            column-span: all;
            /* all横跨所有列 */
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <h1>赵孙钱李</h1>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex tenetur aliquid quo suscipit repellendus, veniam exercitationem consequatur nesciunt nostrum, obcaecati sint dicta. Soluta explicabo magni aliquam ratione possimus praesentium eligendi!
        Sapiente, delectus eveniet eos mollitia architecto dolores ex dolor consequatur quibusdam deserunt ea, obcaecati ab fugiat voluptas harum voluptatem similique quidem illo et ducimus optio voluptatibus. Consequuntur reprehenderit qui saepe?
        Repellendus libero aut ullam quas deserunt officiis expedita rem illum sequi, alias optio commodi perspiciatis minus vel quo quasi error? Nemo itaque tempora nulla officia reiciendis quisquam voluptatum, eligendi soluta.
        Cum hic laborum eos dolorum repudiandae quo. Temporibus reprehenderit voluptatem quo. Quos ipsum illum sint impedit nobis in, consectetur magnam mollitia pariatur est, eligendi harum quo autem repellendus provident maxime?
        Illum, omnis nihil perferendis eos natus eum laboriosam assumenda consequatur! Officiis doloremque quas est, illo temporibus itaque, rem numquam maiores dolorum officia ab perspiciatis quam sit incidunt, totam vero quod!
        Necessitatibus veritatis culpa deleniti inventore non molestias, esse soluta. Rem perferendis commodi voluptas eligendi pariatur dicta. Unde blanditiis culpa voluptates corrupti fugit! Expedita debitis explicabo vero doloribus deserunt eaque nemo.
    </div>
</body>
</html>